<template>
  <div class="home">
    <div class="content">
      <!-- 头部区域 -->
      <div class="header">
        <div class="text">外卖点餐</div>
        <div class="location">
          <van-icon name="location-o" />
          <span>广州市天河区</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 主要内容区域 -->
      <div class="main">
        <div class="main_bg">
          <div class="search">
            <input type="text">
            <div class="search_text">搜索</div>
          </div>
          <div class="classify">
            <div class="big_classify">
              <div v-for="(item,index) in homeData.big_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{item.name}}
              </div>
            </div>
            <div class="small_classify">
              <div v-for="(item,index) in homeData.small_classify" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <van-tabs class="van-tabs">
          <van-tab v-for="(item,index) in homeData.centent_nav_list" :key="index" :title="item.tab">
          <Store :store_list="item.data"></Store>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部选项栏区域 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../../components/Footer.vue'
import Store from './components/Store.vue'
import {reactive,toRefs,onMounted} from 'vue';
import {getHomeData} from '../../request/api'
export default {
  components:{
    Footer,
    Store
  },
     setup() {
    let data = reactive({
      homeData:{},
    });
    
    //数据请求
    const getHome=async () =>{
      const res=await getHomeData();
      if(res.status===200&&res.data.code===0){
        data.homeData=res.data.data;
      }
    }
    onMounted(()=>{
      getHome();
    })
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less" scoped>

/deep/ .van-tabs__wrap{
  border-radius: 10px;
}
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  font-size: 14px;
  .content {
    flex: 1;
    overflow-y: auto;
    .main{
      margin-top: -20px;
      .main_bg{
        background-image: linear-gradient(#fff,#f5f5f5);
        padding: 10px 20px 0 20px;
        border-radius:20px 20px 0 0;
        position: relative;
        .classify{
          padding: 20px 0;
          .big_classify{
            display: flex;
            div{
              flex: 1;
              display: flex;
              flex-flow: column;
              justify-content: center;
              align-items: center;
              .icon{
                width: 50px;
                height: 50px;
                margin-bottom: 5px;
              }
            }
          }
          .small_classify{
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            div{
              display: flex;
              justify-content: center;
              align-items: center;
              flex-flow: column;
              width: 20%;
              .icon{
                width: 30px;
                height: 30px;
                margin: 0 10px 10px 10px;
              }
            }
          }
        }
        .search{
          position: relative;
          .search_text{
            position: absolute;
            background-color: #ffc400;
            right: -6px;
            top: 1px;
            width: 50px;
            height: 32px;
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            font-size:16px;
          }
          input {
            width: 100%;
            border:1px solid #ffc400;
            border-radius:20px;
            height: 30px;
          }
        }
      }
      .van-tabs{
        margin: 0 20px 10px;
      }
    }
    .header {
      background-image: linear-gradient(#ffc400,#fff);
      display: flex;
      justify-content: space-between;
      padding:20px 20px 35px 20px;
      align-items: center;
      .text{
        font-size: 22px;
        font-weight: 700;
    }
    .location {
      span{
        margin: 0 5px;
      }
      font-style: italic;
      font-size: 18px;
    }
    }
  }
}
</style>